<div nz-row id="login-body">
  <div nz-col id="login-box">
    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="_submitForm()">
      <h1 class="login-title">通知助手管理系统</h1>
      <div nz-form-item>
        <div nz-form-control [nzValidateStatus]="validateForm.controls.userName">
          <nz-input formControlName="userName" [nzPlaceHolder]="'Username'" [nzSize]="'large'" spellcheck="false" [(ngModel)]="loginInfo.name">
            <ng-template #prefix>
              <i class="anticon anticon-user"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="validateForm.controls.userName.dirty&&validateForm.controls.userName.hasError('required')">Please input your username!</div>
        </div>
      </div>
      <div nz-form-item>
        <div nz-form-control [nzValidateStatus]="validateForm.controls.password">
          <nz-input formControlName="password" [nzType]="'password'" [nzPlaceHolder]="'Password'" [nzSize]="'large'" [(ngModel)]="loginInfo.pwd">
            <ng-template #prefix>
              <i class="anticon anticon-lock"></i>
            </ng-template>
          </nz-input>
          <div nz-form-explain *ngIf="validateForm.controls.password.dirty&&validateForm.controls.password.hasError('required')">Please input your Password!</div>
        </div>
      </div>
      <div nz-form-item>
        <div nz-form-control [nzValidateStatus]="validateForm.controls.captcha">
          <div nz-row [nzGutter]="8">
            <div nz-col [nzSpan]="12">
              <nz-input formControlName="captcha" [nzType]="'text'" [nzPlaceHolder]="'Captcha'" [nzSize]="'large'" [(ngModel)]="loginInfo.captcha">
                <ng-template #prefix>
                  <i class="anticon anticon-tag-o"></i>
                </ng-template>
              </nz-input>
            </div>
            <div nz-col [nzSpan]="12" #pCaptcha (click)="getCaptcha()">
              <!-- <img [src]="captcha" alt="captcha" style="display: block; border: 1px solid #d9d9d9; width: 100%; height: 32px; border-radius: 5px;"> -->
            </div>
          </div>
          
          
          <div nz-form-explain *ngIf="validateForm.controls.captcha.dirty&&validateForm.controls.captcha.hasError('required')">Please input your Captcha!</div>
          <div nz-form-explain *ngIf="loginMessage" [innerHTML]="loginMessage" style="color: #f04134"></div>
        </div>
      </div>
      <div nz-form-item>
        <div nz-form-control>
          <label nz-checkbox formControlName="remember" [(ngModel)]="loginInfo.remember">
            <span>Remember me</span>
          </label>
          <a class="login-form-forgot" class="login-form-forgot">Forgot password</a>
          <button nz-button class="login-form-button" [nzType]="'primary'" [nzSize]="'large'" (click)="doLogin()">Log in</button>
        </div>
      </div>
    </form>
  </div>
</div>
